<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5 svg天气预报图标特效</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div class="weather-container">
<div class="svg-contain">
<svg version="1.1" class="clear-sky-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72.3 52.6" style="enable-background:new 0 0 72.3 52.6;" xml:space="preserve">
<g>
	<path class="sun" d="M50.8,25.7c0,7.9-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4S50.8,17.8,50.8,25.7z"/>
<path  class="line line-1" d="M54.5,25.8h6"/>
<path class="line line-2" d="M12.4,25.8h6"/>
<path class="line line-3" d="M36.5,44.3v6"/>
<path class="line line-4" d="M36.5,8.2v-6"/>
<path class="line line-5" d="M23,38.8l-4.8,4.8"/>
<path class="line line-6" d="M54.9,8.9L50,13.8"/>
<path class="line line-7" d="M50,38.8l4.4,4.4"/>
<path class="line line-8" d="M18.8,9.6l4.2,4.2"/>
</g>
</svg>
</div>
</div>

</body>
</html>